import React from 'react'
import { withRouter, RouteComponentProps } from 'react-router-dom'
import { TabBar } from 'antd-mobile'
import './index.css'
class NavTabBar extends React.Component<Props & RouteComponentProps, State> {
    static defaultProps = {
        active: 0,
    }
    tabList = [
        {
            name: '首页',
            link: '/',
            iconActive: 'nav-tab1-select-no',
            icon: 'nav-tab1-select',
        },
        {
            name: '快问',
            link: '/ask',
            iconActive: 'nav-tab2-select-no',
            icon: 'nav-tab2-select',
        },
    ]
    press = (index) => {
        // 当前点击
        if (index === this.props.active) {
            return
        }
        this.props.history.push(this.tabList[index].link)
    }
    render() {
        const { active } = this.props
        return (
            <div className="nav-tabbar">
                <TabBar
                    unselectedTintColor="rgba(0,0,0,0.25)"
                    tintColor="#FF6E00"
                    barTintColor="#ffffff"
                    prerenderingSiblingsNumber={0}
                >
                    {this.tabList.map((tab, index) => (
                        <TabBar.Item
                            title={tab.name}
                            key={tab.name}
                            onPress={() => this.press(index)}
                            selected={+active === index}
                            selectedIcon={<span className={tab.iconActive} />}
                            icon={<span className={tab.icon} />}
                        />
                    ))}
                </TabBar>
            </div>
        )
    }
}
export default withRouter(NavTabBar)
